import { Button, Col, Flex, Form, Input, InputNumber, Row, Space, message } from 'antd';
import React, { useEffect, useState } from 'react';
import { Helmet, getLocale, useIntl } from 'umi';

import email from '@/assets/contact_email.svg';
import bg from '@/assets/contact_market_o_bg1.png';
import UseScroolIntoView from '@/components/UseScroolIntoView';
import { ArrowRightOutlined } from '@ant-design/icons';

import bg1 from '@/assets/contact_market_o_bg2.png';
const Contact: React.FC = () => {
  const intl = useIntl();
  UseScroolIntoView();
  const [form] = Form.useForm();
  const values = Form.useWatch([], form);
  const isEn = getLocale() == 'en-US';

  const [submittable, setSubmittable] = useState<boolean>(false);
  useEffect(() => {
    if (values && Object.keys(values).length > 0) {
      form
        .validateFields({ validateOnly: true })
        .then(() => {
          setSubmittable(true);
        })
        .catch(() => setSubmittable(false));
    } else {
      setSubmittable(false);
    }
  }, [form, values]);
  // const items = useMemo(
  //   () => [
  //     // {
  //     //   key: 'part-1',
  //     //   href: '#part-1',
  //     //   title: intl.formatMessage({ id: 'center.contact_way' }),
  //     // },
  //     {
  //       key: 'part-2',
  //       href: '#part-2',
  //       title: intl.formatMessage({ id: 'center.contact_mark' }),
  //     },
  //     {
  //       key: 'part-3',
  //       href: '#part-3',
  //       title: intl.formatMessage({ id: 'center.contact_medium' }),
  //     },
  //     {
  //       key: 'part-4',
  //       href: '#part-4',
  //       title: intl.formatMessage({ id: 'center.contact_advice' }),
  //     },
  //     {
  //       key: 'part-5',
  //       href: '#part-5',
  //       title: intl.formatMessage({ id: 'center.contact_msg' }),
  //     },
  //   ],
  //   [intl],
  // );
  // const list = [
  //   { title: 'center.contact_hk' },
  //   { title: 'center.contact_sz' },
  //   { title: 'center.contact_xjp' },
  // ];
  const markList = [
    {
      label: 'home.customer_service',
      phone: '+852 2307 1122',
      email: 'service@xlend.hk',
    },
    {
      label: 'home.institutional_settlement',
      phone: '+852 2307 1122',
      email: 'service@xlend.hk',
    },
    {
      label: 'center.contact_bus',
      phone: '+852 5347 8867',
      email: 'business@xlend.hk',
    },

    // 'center.contact_bank',
  ];
  const mediList = [
    {
      title: 'center.contact_media_interview',
      word: 'center.contact_media_interview_word',
      email: 'business@xlend.hk',
    },
    { title: 'center.contact_green', word: 'center.contact_green_word', email: 'contact@xlend.hk' },
  ];
  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="contact">
        {/* <Affix offsetTop={51.5}>
        <div style={{ background: '#fff' }}>
          <div className="common">
            <Anchor targetOffset={110} direction="horizontal" items={items} />
          </div>
        </div>
      </Affix> */}
        {/* <div style={{ background: '#F8FAFF', padding: '60px 0' }} id="part-1">
        <div className="common">
          <div
            style={{
              fontSize: 30,
              color: '#333',
              paddingBottom: 40,
              fontWeight: 'bold',
              textAlign: 'center',
            }}
          >
            {intl.formatMessage({ id: 'center.contact_way' })}
          </div>
          <Flex justify="space-between" align="center" gap={20}>
            {list.map((item) => {
              const { title } = item;
              return (
                <div className="contact_box" key={title}>
                  <div className="contact_box_bg" />
                  <div
                    style={{ fontSize: 20, color: '#333', marginBottom: 20, fontWeight: 'bold' }}
                  >
                    {intl.formatMessage({ id: title })}
                  </div>
                  <div style={{ fontSize: 16, color: '#666' }}>
                    {intl.formatMessage({ id: 'center.contact_phone' })}：(US)714-987-6138
                  </div>
                  <div style={{ margin: '10px 0', fontSize: 16, color: '#666' }}>
                    {intl.formatMessage({ id: 'center.contact_email' })}：codyleng@laimeiusa.com
                  </div>
                  <div style={{ fontSize: 16, color: '#666', lineHeight: '26px' }}>
                    {intl.formatMessage({ id: 'center.contact_address' })}：135 S.State College
                    Blvd.Suite 200, Brea,CA 92821 USA
                  </div>
                </div>
              );
            })}
          </Flex>
        </div>
      </div> */}
        {/* 市场合作 */}
        <div id="part-2" style={{ padding: '60px 0' }}>
          <div className="common">
            <div
              style={{
                fontSize: 30,
                color: '#333',
                paddingBottom: 40,
                fontWeight: 'bold',
                textAlign: 'center',
              }}
            >
              {intl.formatMessage({ id: 'home.concat_us' })}
            </div>
            <Flex gap={20}>
              {markList.map((item) => {
                const { label, phone, email } = item;
                return (
                  <div key={label} className="contact_market_item">
                    <div style={{ color: '#333', fontSize: 20, fontWeight: 700 }}>
                      {intl.formatMessage({ id: label })}
                    </div>
                    <div style={{ margin: '12px 0 0 0', fontSize: 16, color: '#666' }}>
                      {intl.formatMessage({ id: 'center.contact_phone' })}：{phone}
                    </div>
                    <div style={{ margin: '12px 0 0 0', fontSize: 16, color: '#666' }}>
                      {intl.formatMessage({ id: 'center.contact_email' })}：{email}
                    </div>

                    {/* <div style={{ fontSize: 16, color: '#666' }}>codyleng@laimeiusa.com</div> */}
                  </div>
                );
              })}
            </Flex>
          </div>
        </div>
        <div style={{ padding: '60px 0' }}>
          <Flex>
            {mediList.map((item, index) => {
              const isFirst = index == 0;
              const { word, title, email: emailVal } = item;
              return (
                <div
                  key={word}
                  id={`part-${3 + index}`}
                  style={{
                    flex: 1,
                    backgroundImage: `url(${isFirst ? bg : bg1})`,
                    position: 'relative',
                    backgroundSize: '100% 100%',
                    display: 'flex',
                    padding: '60px  45px 90px',

                    justifyContent: isFirst ? 'flex-end' : 'flex-start',
                  }}
                >
                  <div style={{ width: 500, marginRight: isFirst ? 80 : 0 }}>
                    <div>
                      <img width={50} src={require(`@/assets/concat_c${index + 1}.png`)} />
                    </div>
                    <div
                      style={{
                        margin: '10px 0',
                        fontSize: isEn ? 26 : 30,
                        color: '#fff',
                        fontWeight: 'bold',
                        whiteSpace: 'nowrap',
                      }}
                    >
                      {intl.formatMessage({ id: title })}
                    </div>
                    <div
                      style={{ marginBottom: 30, fontSize: 16, color: '#fff', lineHeight: '26px' }}
                    >
                      {intl.formatMessage({ id: word })}
                    </div>
                    <Space
                      align="center"
                      style={{ fontSize: 18, fontWeight: 'bold', color: '#fff' }}
                    >
                      <div>
                        <img width={30} src={email} />
                      </div>
                      {emailVal}
                    </Space>
                  </div>
                </div>
              );
            })}
          </Flex>
        </div>
        <div id="part-5" className="common" style={{ paddingBottom: 159 }}>
          <div style={{ textAlign: 'center' }}>
            <div
              style={{
                fontSize: 30,
                color: '#333',
                fontWeight: 'bold',

                marginBottom: 10,
              }}
            >
              {intl.formatMessage({ id: 'center.contact_me' })}
            </div>
            <div
              style={{
                fontSize: 16,
                color: '#666',
                marginBottom: 58,
              }}
            >
              {intl.formatMessage({ id: 'center.contact_me_word' })}
            </div>
            <Form
              form={form}
              onFinish={() => {
                message.success(intl.formatMessage({ id: 'center.contact_send_suc' }));
              }}
              labelCol={{ span: 0 }}
            >
              <Row gutter={[30, 30]} style={{ textAlign: 'left' }}>
                <Col span={8}>
                  <Form.Item
                    label={intl.formatMessage({ id: 'center.contact_name' })}
                    rules={[{ required: true }]}
                    name="name"
                  >
                    <Input
                      placeholder={intl.formatMessage({ id: 'center.contact_name' })}
                      style={{
                        borderRadius: 6,
                        height: '51px',
                        lineHeight: '51px',
                        width: '100%',
                      }}
                    />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item
                    label={intl.formatMessage({ id: 'center.contact_phone' })}
                    rules={[{ required: true }]}
                    name="phone"
                  >
                    <InputNumber
                      placeholder={intl.formatMessage({ id: 'center.contact_phone' })}
                      controls={false}
                      style={{
                        background: '#fff',
                        borderRadius: 6,
                        height: '51px',
                        lineHeight: '51px',
                        width: '100%',
                      }}
                    />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item
                    label={intl.formatMessage({ id: 'center.contact_email' })}
                    rules={[{ required: true }]}
                    name="email"
                  >
                    <Input
                      placeholder={intl.formatMessage({ id: 'center.contact_email' })}
                      style={{
                        background: '#fff',
                        borderRadius: 6,
                        height: '51px',
                        lineHeight: '51px',
                        width: '100%',
                      }}
                    />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label={intl.formatMessage({ id: 'center.contact_content' })}
                    rules={[{ required: true, min: 15 }]}
                    name="content"
                  >
                    <Input.TextArea
                      maxLength={1000}
                      showCount
                      autoSize={{ minRows: 7, maxRows: 10 }}
                      placeholder={intl.formatMessage({ id: 'center.contact_content' })}
                      style={{
                        background: '#fff',
                        borderRadius: 6,
                        width: '100%',
                      }}
                    />
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item style={{ marginTop: 30 }}>
                <Flex justify="center">
                  <Button
                    disabled={!submittable}
                    className="contact_btn"
                    htmlType="submit"
                    type="primary"
                    style={{
                      height: '60px',
                      minWidth: 400,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <Space style={{ fontSize: 16 }}>
                      <div>{intl.formatMessage({ id: 'center.contact_send' })}</div>
                      <div className="send_arrow">
                        <ArrowRightOutlined />
                      </div>
                    </Space>
                  </Button>
                </Flex>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </>
  );
};

export default Contact;
